<template>
    <div class="collection">
        <div  class="listitem" v-for="item in collectionlist" :key="item.articleid">
            <div class="left" @click="goreadpage(item)">
                <img :src="item.imgurl" alt="">
            </div>
            <div class="right" >
                <div class="content" @click="goreadpage(item)">
                <h2 class="title">{{item.bookname}}</h2>
                
                    <div class="conleft">
                        {{item.introduction}}
                    </div>   
                </div>

                <div class="conleft" >
                        <!-- <el-button @click="delcollection(item.articleid)">删除</el-button> -->
                          <el-button type="danger" @click="delcollection(item.articleid)">删除</el-button>
                    </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            collectionlist:[]
        }
    },
    mounted(){
        this.getcollectionlist()
    },
    methods:{
        //删除当前收藏
        delcollection(id){

            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
              let data=await this.axios.get("article/delcollection",{
                params:{
                    readerid:this.$store.state.readerdata.id,
                    articleid:id
                }
            })
            // console.log(data.data)
            this.getcollectionlist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {

          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

          
        },
        //跳转到阅读页
        async goreadpage(e){
            let id=this.$store.state.readerdata.id
            let data=await this.axios.get("article/chapterid",{
                params:{
                    readerid:id,
                    articleid:e.articleid,
                }
            })
            // console.log(data.data.data[0])
            if(data.data.data[0].chapterid==null){
                this.$router.push(`/chapterlist/${e.articleid}`)
                return 
            }
             this.$router.push(`readpage/${data.data.data[0].chapterid}`)
        },

        //获取收藏的全部信息
        async getcollectionlist(){
            // console.log(this.$store.state.readerdata)
            let readerid=this.$store.state.readerdata.id
            let data=await this.axios.get(`article/allarticlecollection?readerid=${readerid}`)
            // console.log(data.data)
             let historyArr=data.data
            let item=null
            // console.log(Date.parse(historyArr[0].pushdate))
           for(let j=0;j<historyArr.length-1;j++){
              for(let i=0;i<historyArr.length-1-j;i++){
              if(Date.parse(historyArr[i].pushdate)<Date.parse(historyArr[i+1].pushdate)){
                  item=historyArr[i]
                  historyArr[i]=historyArr[i+1]
                  historyArr[i+1]=item
                  
              }
            }
           }
            this.collectionlist=data.data
        }
    }
}
</script>
<style lang="less" scoped>
    .collection {
        width: 100%;
        display: flex;
        flex-direction: column;
  .listitem {
      cursor: pointer;
    display: flex;
    background-color: #dcdde1;
    // margin-bottom:20px;
    padding: 10px 20px;
    border-top:3px solid #718093;
    .left {
        flex:1;
      img {
        width:90%;
        height: 100%;
      }
    }


    .right {
           flex:12;
           display: flex;      
        display: flex;
        padding-left: 40px;
        .content {
        flex: 12;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: start;
        .title {

        }

        .conleft {

        }
    }

  .conleft {
      flex: 2;
      display: flex;
      justify-content: center;
      align-items: center;
    el-button {

    }
  }
}

    // .right {
    //     flex:10;
    //     display: flex;
    //     padding-left: 40px;
    //     flex-direction: column;
    //     justify-content: space-around;
    //   .title {

    //   }

    //   .content {
    //    display: flex;
    //     .conleft{
    //            font-size: 16px;
    //            flex: 6;
    //      overflow: hidden;
    //     display: -webkit-box;
    //     -webkit-line-clamp: 3;
    //     -webkit-box-orient: vertical;
    //     }
    //     .conright{
    //         flex:1;
    //         text-align: center;
    //     }
  
    //   }
    // }
  }
}
</style>